import $ from 'jquery';
//import inherits from 'inherits';
//这个写法是只读的
import BpmnModeler from 'bpmn-js/lib/Viewer';
//这个写法是可编辑的
//import BpmnModeler from 'bpmn-js/lib/Modeler';
import testDiagram from './diagram.bpmn';
//import propertiesPanelModule from 'bpmn-js-properties-panel';
//import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';
import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';



var viewer = new BpmnModeler({
  container: '#js-canvas',
	
	// propertiesPanel: {
	// 	parent: '#js-properties-panel'
	// },
	additionalModules: [
		ZoomScrollModule,
		// 左边工具栏以及节点
		MoveCanvasModule,
		// propertiesPanelModule,
		// // 左边工具栏以及节点
		// propertiesProviderModule
	]
	
});

viewer.importXML(testDiagram, function(err) {
  if (!err) {
		event2();
    console.log('success!');
    viewer.get('canvas').zoom('fit-viewport');
		//event1();
		//event2();
		//updateProcessName();
		//readTaskProperties();
		//addModelerListener ()
		
		debugger;
		
		var canvas = viewer.get('canvas');
		var overlays = viewer.get('overlays');
		
		
		// zoom to fit full viewport
		canvas.zoom('fit-viewport');
		
		// attach an overlay to a node
		overlays.add('Task_1hcentk', 'note', {
		  position: {
		    //bottom: 0,
		    top: 0,
				right: -5
		  },
		  html: '<div id="Task_1hcentk_note" style="display: none" class="diagram-note">Mixed up the labels?</div>'
		});
		
		// add marker
		//canvas.addMarker('Task_1hcentk', 'needs-discussion');
		
  } else {
    console.log('something went wrong:', err);
  }
});

function event2(){
	const eventBus = viewer.get('eventBus') // 需要使用eventBus
	const eventTypes = ['element.hover', 'element.out'] // 需要监听的事件集合
	// const modeling = viewer.get('modeling')
	var elementRegistry = viewer.get('elementRegistry');
	eventTypes.forEach(function(eventType) {
		eventBus.on(eventType, function(e) {
			//排除根节点元素，也就是画布
			var shape = e.element ? elementRegistry.get(e.element.id) : e.shape
			if (e && shape.type == 'bpmn:Task') {
				var o = shape.businessObject;
				var taskId = o.id;
				$("#"+taskId+"_note").toggle();
			}
		})
	})
}